// 匀速动画
function animationFun1(ele, target) {
    // 先清除另外一个方向的定时器
    clearInterval(ele.interId);
    // 把定时器的id设置到DOM元素上
    ele.interId = setInterval(function() {
        // 当到达目标时,进行清除定时器
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
            // 向右走
        } else if (ele.offsetLeft < target) {
            var dis = (ele.offsetLeft + 13) > target ? target : (ele.offsetLeft + 13);
            ele.style.left = dis + 'px';
            // 向左走
        } else if (ele.offsetLeft > target) {
            var dis = (ele.offsetLeft - 13) < target ? target : (ele.offsetLeft - 13);
            ele.style.left = dis + 'px';
        };
    }, 50);
};
// 缓慢动画
function animationFun2(ele, target) {
    // 先清除另外一个方向的定时器
    clearInterval(ele.interId);
    // 把定时器的id设置到DOM元素上
    ele.interId = setInterval(function() {
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
        } else {
            var step = (target - ele.offsetLeft) / 10;
            // 当step为小数时,进行上下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            ele.style.left = ele.offsetLeft + step + 'px';
        }
    }, 20);
};

var gzldahezi = document.getElementsByClassName('gzldahezi')[0];
// 所有的小圆点元素
var gzltongyigmzs = document.getElementsByClassName('gzltongyigmz');
// 放置图片的最大区域
var calList = document.getElementsByClassName('gzlzyzy')[0];
// 左右按钮
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
calList.onmouseover = function() {
    // 左右按钮出现
    prev.style.display = 'block';
    next.style.display = 'block';
    // 轮播停止
    clearInterval(gzldahezi.autoId);
};
// ②:鼠标离开图片区域时,左右按钮消失,轮播继续
calList.onmouseout = function() {
    // 左右按钮消失
    prev.style.display = 'none';
    next.style.display = 'none';
    // 轮播继续
    autoplay();
};
// ③:给右按钮绑定事件,ul移动,小圆点跟随图片变化
// 设置小圆点的计数器
var flag = 0;
// ul移动的标志位
var count = 0;
// 小圆点样式的排他函数
function backstart(ele) {
    for (var i = 0; i < ele.length; i++) {
        ele[i].className = 'gzltongyigmz';
    }
};
// 绑定右按钮点击事件
next.onclick = function() {
    // ******小圆点变化代码开始******
    // 小圆点
    flag++;
    if (flag == gzltongyigmzs.length) {
        flag = 0;
    }
    // 设置小圆点样式
    // 排他
    backstart(gzltongyigmzs);
    gzltongyigmzs[flag].className = 'gzltongyigmz gzlqiehuanyd';
    // ******小圆点变化代码结束******

    // ******ul移动变化代码开始******
    count++;

    if (count == gzldahezi.children.length) {
        // 拉回left=0
        gzldahezi.style.left = 0;
        // 设置count为1,就可以看到第二张图片了
        count = 1;
    };
    // 使ul进行移动
    var target = count * (-600);
    // 进行缓慢移动
    animationFun2(gzldahezi, target);
    // ******ul移动变化代码结束******
};
// ④:给左按钮绑定事件,ul移动,小圆点跟随图片变化
prev.onclick = function() {
    // ******小圆点变化代码开始******
    flag--;
    if (flag < 0) {
        flag = gzltongyigmzs.length - 1;
    }
    // 设置小圆点的样式
    // 排他
    backstart(gzltongyigmzs);
    gzltongyigmzs[flag].className = 'gzltongyigmz gzlqiehuanyd';
    // ******小圆点变化代码结束******
    // ******ul移动变化代码开始******
    if (count == 0) {
        count = gzldahezi.children.length - 1;
        gzldahezi.style.left = count * (-600) + 'px';
    };
    count--;
    // 使ul进行移动
    var target = count * (-600);
    // 进行缓慢移动
    animationFun2(gzldahezi, target);
    // ******ul移动变化代码结束******
}

// ⑤:自动轮播调用右按钮事件
function autoplay() {
    gzldahezi.autoId = setInterval(function() {
        // 调用绑定右按钮事件
        next.onclick();
    }, 3000)
};
autoplay();
// ⑥:焦点轮播
// 循环给所有小圆点绑定点击事件
for (var i = 0; i < gzltongyigmzs.length; i++) {
    // 保存i值到index属性中
    // 给DOM元素设置index的属性
    gzltongyigmzs[i].index = i;
    gzltongyigmzs[i].onclick = function() {
        // 直接设置同步
        flag = this.index;
        count = this.index;
        console.log(flag);
        console.log(count);
        // 1.小圆点的样式改变
        // 排他思想
        for (var j = 0; j < gzltongyigmzs.length; j++) {
            gzltongyigmzs[j].className = 'gzltongyigmz';
        };
        // 点击谁,谁变红
        this.className = "gzltongyigmz gzlqiehuanyd";
        // 2.使ul进行移动
        var target = this.index * (-600);
        // 进行缓慢移动
        animationFun2(gzldahezi, target);
    }
};